<clr-modal [(clrModalOpen)]="addRobotOpened"
  [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
  <h3 class="modal-title">{{'ROBOT_ACCOUNT.CREAT_ROBOT_ACCOUNT' | translate}}</h3>
  <div class="modal-body">
    <form #robotForm="ngForm">
      <section class="form-block">
        <div class="form-group">
          <label class="col-md-3
            form-group-label-override required" for="robot_name">
            {{'ROBOT_ACCOUNT.NAME' | translate}}
          </label>
          <label aria-haspopup="true" role="tooltip" class="tooltip
            tooltip-validation
            tooltip-md tooltip-bottom-left" for="robot_name"
            [class.invalid]="!isRobotNameValid">
            <input type="text"
              [(ngModel)]="robot.name"
              size="30" class="input-width"
              name="robot_name"
              id="robot_name"
              #robotName="ngModel"
              required
              pattern='[^" ~#$%]+'
              maxLengthExt="255"
              autocomplete="off"
              (keyup)='handleValidation()'>
            <span class="tooltip-content">
              {{ nameTooltipText | translate }}
            </span>
          </label>
          <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
        </div>
        <div class="form-group">
          <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' |
            translate}}</label>
          <input type="text" size="255" class="input-width"
            [(ngModel)]="robot.description"
            name="robot_desc" id="robot_desc">
        </div>
        <div class="form-group clr-form-control rule-width">
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [checked]="true"
              [(ngModel)]="robot.access.isPull" name="isPull"
              id="permission-pull" class="clr-checkbox">
            <label for="permission-pull" class="clr-control-label">
              {{'ROBOT_ACCOUNT.PULL_PERMISSION' | translate}}
            </label>
          </clr-checkbox-wrapper>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [checked]="true"
              [(ngModel)]="robot.access.isPush" name="isPush"
              id="permission-push" class="clr-checkbox">
            <label for="permission-push" class="clr-control-label">
              {{'ROBOT_ACCOUNT.PUSH_PERMISSION' | translate}}
            </label>
          </clr-checkbox-wrapper>
        </div>
      </section>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL'
      | translate}}</button>
    <button type="button" [disabled]="shouldDisable" class="btn btn-primary"
      (click)="onSubmit()">{{'BUTTON.SAVE'
      | translate}}</button>
  </div>
</clr-modal>
<clr-modal [(clrModalOpen)]="copyToken" class="copy-token"
  [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
  <div class="modal-title">
    <h3 class="modal-title">
      <clr-icon class="alert-icon success-icon" shape="check-circle" size="50"></clr-icon>
      {{ createSuccess | translate}}</h3>
    <div class="alert alert-info" role="alert">
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
          </div>
          <span class="alert-text">{{'ROBOT_ACCOUNT.ALERT_TEXT' | translate}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-body">
    <section class="form-block show-info">
      <div class="form-group robot-name">
        <label class="form-group-label-override">{{'ROBOT_ACCOUNT.NAME'
          | translate}}</label>
        <span>{{robotAccount}}</span>
      </div>
      <div class="form-group robot-token">
        <label class="form-group-label-override">{{'ROBOT_ACCOUNT.TOKEN' |
          translate}}</label>
        <hbr-copy-input (onCopySuccess)="onCpSuccess($event)"
          (onCopyError)="onCpError($event)" inputSize="50" headerTitle=""
          defaultValue="{{robotToken}}" class="copy-input"></hbr-copy-input>
      </div>
    </section>
  </div>
</clr-modal>